<!DOCTYPE html>
<html>
<body>
  <div id="root"></div>
  <div id="root1"></div>
  <div id="root2"></div>
</body>
<script src="./babel.min.js"></script>
<script src="./react.development.js"></script>
<script src="./react-dom.development.js"></script>
<!-- 1. 引入类型限制js, 在react15版本以前，这个集成在react库当中，之后独立开来 -->
<script src="./prop-types.js"></script>

<script type="text/babel">
  class Login extends React.Component{
    state = {
      username: '',
      password: ''
    }

    // 受控组件受到谁的控制，state： 
    // 解释： 当值的变更都保存到state中，取值的时候从state中去取的时候，我们称之为受控组件

    // 保存用户名和密码到状态中
    saveUser = (e)=>{
      console.log(e.target.value)
      this.setState({username: e.target.value})
    }

    savePassword= (e)=>{
      console.log(e.target.value)
      this.setState({password: e.target.value})
    }


    handleSubmit = (event)=>{
      event.preventDefault() // 阻止表单提交
      const {username, password} = this.state
      alert(`你输入的用户名是：${username}, 你输入的密码是：${password}`)
    }
    render(){
      return (
        <form onSubmit={this.handleSubmit}>
          用户名：<input onChange={this.saveUser} type="text" name="username" />
          密码：<input onChange={this.savePassword} type="password" name="password" />
          <button>登录</button>
          </form>
      )
    }
  }

ReactDOM.render(<Login />, document.getElementById('root'))
</script>
</html>
